<template>
   <div class="content-parent"  v-loading="loading">
      <div class="content-left float-left bg-white">
         <div class="content-left-market pdl pdr">
            <h3 class="tit"  @click="baseHandle(['1'],true)">数据集市DataMarket（ADS）</h3>
            <div class="cart-item-parent mt20">
               <div class="card-item market-item" @click="baseHandle(['1','6'],false)">
                  <span class="base-name">商用大数据集市</span>
                  <span class="base-alias">（SY）</span>
               </div>
               <div class="card-item market-item" @click="baseHandle(['1','4'],false)">
                  <span class="base-name">创新药集市</span>
                  <span class="base-alias">（CXY）</span>
               </div>
               <div class="card-item market-item" @click="baseHandle(['1','5'],false)">
                  <span class="base-name">商保集市</span>
                  <span class="base-alias">（SHB）</span>
               </div>
            </div>
         </div>
         <div class="content-left-warehouse mt20 pdl pdr">
            <h3 class="tit"  @click="baseHandle(['2'],true)">数据仓库DataWarehouse（CDM）</h3>
            <div class="cart-item-parent mt20">
               <div class="cart-item-left">
                  <div class="card-item market-item cart-item-left-top" @click="baseHandle(['2','7','16'],false)">
                     <span class="base-name">数据汇总层（DWD）</span>
                  </div>
                  <div class="cart-item-left-item-parent">
                     <div class="card-item market-item  cart-item-left-item" @click="baseHandle(['2','7','15'],false)">
                        <span class="base-name">数据明细层</span>
                        <span class="base-alias">（DWD）</span>
                     </div>
                     <div class="card-item market-item  cart-item-left-item" @click="baseHandle(['2','7','17'],false)">
                        <span class="base-name">映射关系</span>
                        <span class="base-alias">（MAP）</span>
                     </div>
                  </div>
                  <div class="cart-item-left-item-parent">
                     <div class="card-item market-item  cart-item-left-item" @click="baseHandle(['2','7','8'],false)">
                        <span class="base-name">主数据</span>
                        <span class="base-alias">（MDM）</span>
                     </div>
                     <div class="card-item market-item  cart-item-left-item" @click="baseHandle(['2','7','18'],false)">
                        <span class="base-name">通用维度</span>
                        <span class="base-alias">（DIM）</span>
                     </div>
                  </div>
               </div>
               <div class="cart-item-right">
                  <div class="card-item market-item" @click="baseHandle(['2','19'],false)">
                     <span class="base-name">创新药部门数仓</span>
                     <span class="base-alias">（CXY）</span>
                  </div>
                  <div class="card-item market-item mt16" @click="baseHandle(['2','20'],false)">
                     <span class="base-name">商保部门数仓</span>
                     <span class="base-alias">（SHB）</span>
                  </div>
               </div>
            </div>
         </div>
         <div class="content-left-lake mt20  pdl pdr">
            <h3 class="tit">数据湖DataLake（ODS）</h3>
            <div class="cart-item-parent mt20">
               <div class="card-item market-item">
                  <span class="base-name">官方数据源</span>
                  <span class="base-alias">（GF）</span>
               </div>
               <div class="card-item market-item">
                  <span class="base-name">三方数据源</span>
                  <span class="base-alias">（SF）</span>
               </div>
               <div class="card-item market-item">
                  <span class="base-name">其他数据源</span>
                  <span class="base-alias">（QT）</span>
               </div>
            </div>
         </div>
      </div>
      <div class="content-right table-list bg-white">
         <selectDump  @searchBtn="getTreeContent" :isTable='false' :isShowBtn="true" ref="selectDump"></selectDump>
         <el-row  class="table-all-filed">
            <el-col :span="8" class="table-all-filed-item model-bg1">
               <span>数据库总数</span>
               <span>{{selectList.totalSchema}}</span>
            </el-col>
            <el-col :span="7" class="table-all-filed-item model-bg2">
               <span>表单数量</span>
               <span>{{selectList.totalTable}}</span>
            </el-col>
            <el-col :span="8" class="table-all-filed-item model-bg3">
               <span> 存储体量</span>
               <span>{{selectList.totalStoreName}}</span>
            </el-col>
         </el-row>
            <div class="tab-position-parent">
               <el-button-group>
                  <el-button label="basis" :class="['btn-notAction',tabPosition=='basis'?'btn-action':'']" @click="handleClick('basis')">表单体量top20</el-button>
                  <el-button label="associat" :class="['btn-notAction',tabPosition=='associat'?'btn-action':'']" @click="handleClick('associat')">元数据变更</el-button>
               </el-button-group>
            </div>
            <el-table v-loading="loading" :data="selectList.bigTableList"  max-height="526px" border class="table-view" v-show="tabPosition=='basis'">
               <el-table-column
                  label="表单名称"
                  align="center"
                  key="tableAlias"
                  prop="tableAlias"
                  :show-overflow-tooltip="true"
               >
               </el-table-column>
               <el-table-column
                  label="表单名称（数据库）"
                  align="center"
                  key="tableName"
                  prop="tableName"
                  :show-overflow-tooltip="true"></el-table-column>
               <el-table-column
                  label="表单体量"
                  align="changTime"
                  key="store"
                  prop="store"
                  width="199">
                  <template slot-scope="scope">
                     <el-progress :text-inside="true" :stroke-width="26" :percentage="Number(scope.row.tableStore)" :format="format"></el-progress>
                  </template>
               </el-table-column>
            </el-table>
            <el-table v-loading="loading" :data="selectList.logList"  max-height="526px" border class="table-view" v-show="tabPosition=='associat'">
               <el-table-column
                  label="表单名称"
                  align="center"
                  key="tableAlias"
                  prop="tableAlias"
                  :show-overflow-tooltip="true"
               >
               </el-table-column>
               <el-table-column
                  label="表单名称（数据库）"
                  align="center"
                  key="tableName"
                  prop="tableName"
                  :show-overflow-tooltip="true"></el-table-column>
               <el-table-column
                  label="变更类型"
                  align="center"
                  key="logTypeName"
                  prop="logTypeName"
                  :show-overflow-tooltip="true">
               </el-table-column>
                <el-table-column
                  label="变更时间"
                  align="center"
                  key="createTime"
                  prop="createTime"
                  :show-overflow-tooltip="true">
               </el-table-column>
            </el-table>
      </div>
   </div>
</template>
<script>
import echarts from 'echarts'
import {setData} from "@/utils/zkComm";
import selectDump from './selectDump'
import {dataStatistics} from '@/api/dataManagement/system/view'
export default {
   name:"",
   components:{selectDump},
   data(){
      return{
         tabPosition:'basis',
         EchartsList:[],
         loading:false,
         selectList:[]
      }
   },
   mounted(){
   },
   methods:{
      format(percentage) {
        return percentage ? `${percentage}Gb` : `${percentage}Gb`;
      },
      handleClick(tab){
         this.tabPosition = tab
      },
      getTreeContent(row){
         this.loading =  true
         this.selectList = ''
         dataStatistics({dirId:row.dirId}).then(res=>{
            this.selectList = res.data;
            this.loading = false;
         })
      },
      baseHandle(arr,isIt) {
         this.$refs.selectDump.selectBase(arr,isIt)
         this.getTreeContent({dirId:arr[arr.length-1]})
      }
   }
}
</script>
<style lang="scss" scoped>
$one:#2A8EF5;
$two:#2CCBED;
$three:#8593F2;
.table-view ::v-deep{

   .el-progress-bar__outer{
      border-radius: 0px;
   }
   .el-progress-bar__inner{
    border-radius: 0px;
   }
   .el-progress-bar__innerText{
      color:gray
   }
}

.model-bg1{
   background: $one;
}
.model-bg2{
   background: $two;
}
.model-bg3{
   background: $three;
}

.pdr{
    padding-right:20px;
}
.pdl{
    padding-left:20px;
}
.mt16{
   margin-top:16px;
}
h3{
   margin:0
}


.tit{
   border-bottom:1px solid rgba(255, 255, 255, .2);
   padding:13px 0 12px 0;
   text-align: center;
   font-size:20px;
}
.tab-position-parent{
   padding-top:22px;
   .btn-notAction{
      border-radius: 0px!important;
   }
   .btn-action{
      background:#1183F8;
      color:#ffffff;
   }
}

.content-parent{
   overflow: hidden;
   color:#fff;
   font-size:20px;
   .content-left{
      width:714px;
      min-height:764px;
      padding:24px 23px 0 16px;
      .card-item {
         font-size:20px;
         border-radius: 10px;
         text-align: center;
         span{
            display: block;
         }
      }
      .base-alias{
         padding-top:7px;
         display: block;
      }
      .cart-item-parent{
         display: flex;
         justify-content: space-between;
      }
       // 公共end

      .content-left-market{
         width:100%;
         height:178px;
         background:#43BED8;
         box-shadow: 7px 7px 0px 0px #318B9F;
         border-radius: 10px;

         .market-item{
            width: 199px;
            height: 83px;
            background: #58D2EC;
            box-shadow: 6px 6px 0px 0px #318B9F;
            padding-top:15px;
         }
      }
      .content-left-warehouse{
         width:100%;
         height:315px;
         background:#41B2D8;
         box-shadow: 7px 7px 0px 0px #338AA7;
         border-radius: 10px;

         .cart-item-left{
            font-size:18px;
            width:338px;
            .base-alias{
               padding-top:6px;
               font-size:16px;
            }
            .cart-item-left-top{
               padding:0;
               line-height:43px;
            }
            .cart-item-left-item-parent{
               display: flex;
               justify-content: space-between;
               margin-top:15px;
            }
            .cart-item-left-item{
               height:71px;
               width:162px;
            }
         }
         .cart-item-right{
            width:278px;
            font-size:20px;
            .base-alias{
               display: block;
            }
            .market-item{
               height:99px;
            }
         }

         .market-item{
            background: #58D2EC;
            box-shadow: 6px 6px 0px 0px #318B9F;
            padding-top:15px;
         }
      }
      .content-left-lake{
         width:100%;
         height:176px;
         background:#3FA7DA;
         box-shadow: 7px 7px 0px 0px #3387AF;
         border-radius: 10px;

         .market-item{
            width: 199px;
            height: 83px;
            background: #58C3F7;
            box-shadow: 6px 6px 0px 0px #3387AF;
            padding-top:15px;
         }
      }
   }
   .content-right{
      .table-all-filed{
         display: flex;
         justify-content: space-between;
         .table-all-filed-item{
            height:60px;
            line-height: 60px;
            border-radius: 4px;
            display: flex;
            justify-content: space-between;
            padding:0px 21px 0 19px;
         }
      }
      .table-view{
         margin-top:16px;
      }
   }
   .table-list{
      padding:20px;
      margin-left:724px;
      min-height:764px;
   }
}
</style>
